<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="callBack" :header-right="headerRight"></xcl-header>
<div class="content">
    <div class="list-block">
        <ul>
        <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label"  style="width:21%">验证码</div>
                <div class="item-input">
                  <input type="text" maxlength="4" v-model="user.softCodeInput"  placeholder="输入验证码" autofocus="autofocus">                 
                </div>
                <div class="item-input"><img  :src="softCode" @click="refreshCode" /></div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label" style="width:21%">手机号</div>
                <div class="item-input">
                  <input type="text" placeholder="输入11位手机号" maxlength="11" v-model="user.userName">
                </div>
                <div class="item-input text-right">
                   <a :class="[user.smsCodeGetting ? 'mute' : '']" href="javascript:;" v-text="user.smsCodeText" @click="getSmsCode"></a>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label" style="width:21%">动态码</div>
                <div class="item-input">
                  <input type="text" placeholder="输入短信中6位验证码" maxlength="6" v-model="user.smsCode">
                </div>
              </div>
            </div>
          </li>
          
        </ul>
    </div>
    <div class="content-block">
    <button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="signUp">下一步</button>
    </div>
 
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>

  </div>
</template>
<script>
    import xclHeader from '../components/header.vue'
    import {getCheck,ERROR_DEFINE}  from '../libs/utils'
    import xclToast from '../components/xclToast.vue'

    let UserProxy =  require("../proxy/user_proxy");
    let User = new UserProxy();
    export default {
        data(){
            return{
                pageTitle:'修改密码',
                headerRight:'',
                callBack:()=>{this.$router.go('/Login');},
                softCode:SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1)),
                forbidenLogin:true,
                header:{
                    show:true
                },
                user:{
                    userName:localStorage.phoneNumber || '',
                    softCodeInput:'',
                    smsCodeText:'获取动态码',
                    smsCode:'',
                    smsCodeGetting:true,
                    smsCodeGetting2:false
                },
                toast:{
                    show:false,
                    content:''
                }
            }
        },
        watch:{
            'user':{
                handler:function (val,oldVal) {
                    if(!getCheck.checkPhone(val.userName) || !val.smsCode || !val.softCodeInput){
                        this.forbidenLogin = true;
                    }else{
                        this.forbidenLogin = false;
                    }
                    if(!getCheck.checkPhone(val.userName)  || !val.softCodeInput || val.smsCodeGetting2){
                        this.user.smsCodeGetting = true;
                    }else{
                        this.user.smsCodeGetting = false;
                    }
                },
                deep:true
            }
        },
        methods:{
            signUp(){
                let _this = this;
                if(this.forbidenLogin) return false;
                User.smsLogin(_this.user.userName+'|'+_this.user.softCodeInput , _this.user.smsCode,(d)=>{
                    if(d.code == 200 ){
                        localStorage.token = d.results[0].t; 
                        localStorage.phoneNumber = _this.user.userName;
                        localStorage.smsCode  = _this.user.smsCode;
                        _this.$router.go('/ModifyPassword/step1');
                    }else{
                        _this.showToast(ERROR_DEFINE[d.code]);
                    }
                });
            },
            getSmsCode(){
                let _this = this;
                if(_this.user.smsCodeGetting) return false;
                if(!this.user.softCodeInput){
                    this.showToast('请先输入图片验证码！');
                    return false;
                }
                if(!getCheck.checkPhone(this.user.userName)){
                    this.showToast('请先输入有效的手机号！');
                    return false;
                }
                User.phoneIsExisted(_this.user.userName,(d1)=>{
                    if(d1.code == 200  &&  !d1.results[0]){
                        _this.showToast('该手机号不存在');
                    }else{
                        User.requestSMSValidate(_this.user.userName+'|'+_this.user.softCodeInput,(d)=>{
                            if(d.code == 200 && d.results && d.results.length){
                                _this.showToast('短信动态码已发送');
                                _this.user.smsCodeGetting2 = true;
                                var start = 60;
                                var timer = setInterval(()=>{
                                    _this.user.smsCodeText = start+'s后重新发送';
                                    start--;
                                    if(start <= 0) {
                                        clearInterval(timer);
                                        _this.user.smsCodeGetting2 = false;
                                        _this.user.smsCodeText = '重新发送';
                                    }
                                },1000);
                                //only for development
                                if(window.IsDev)_this.user.smsCode = d.results[0];
                            }else if(d.code == 404){
                                _this.showToast(ERROR_DEFINE[d.code]);
                                _this.refreshCode();
                            }else{
                                _this.showToast(ERROR_DEFINE[d.code]);
                            }
                        });
                    }
                });
                
            },
            refreshCode(){
                this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
            },
            showToast(text){
                this.toast={show:true,content:text};
                setTimeout(()=>{this.toast.show =  false},2800);
            }
        },
        components:{
           "xclHeader":xclHeader,  
           'xclToast':xclToast              
        }
    }
</script>
<style  lang="stylus">
    .text-right
        text-align right
    .btn-style
        height 2rem
        font-size .85rem
        line-height 2rem !important
        width:100%
    .mute
        color #ddd  
    .f12
        font-size .8em  
</style>    
